<template>
  <view>
    <uv-upload
      v-if="fileList.length < max"
      :file-list="fileList"
      name="file"
      :multiple="multiple"
      :max-count="max"
      width="630"
      height="auto"
      @after-read="afterRead"
    >
      <uv-button
        :color="bgColor"
        :icon="icon ? icon : iconUplaod"
        icon-color="#fff"
        :icon-size="icon ? '40rpx' : '28rpx'"
        :text="text"
        custom-style="width: 630rpx"
      />
    </uv-upload>
    <view v-if="fileList.length > 0" class="img-list">
      <view v-for="(item, index) in fileList" :key="index" class="img-item">
        <view class="img-del" v-if="item.status == 'success'" @click="deletePic(index)">
          <uv-icon name="close" color="#fff" />
        </view>
        <image :src="item.fullPath" mode="aspectFill" @click="previewImage(item)" />
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, watch } from "vue";
import { commonUpload } from "@/request/common.js";
import iconUplaod from "@/static/login/icon_uplaod.png";
const props = defineProps({
  // 上传图片
  value: {
    type: [Array, String],
    default: [],
  },
  // 多图上传
  multiple: {
    type: Boolean,
    default: false,
  },
  // 图标
  icon: {
    type: String,
    default: "",
  },
  // 按钮文字
  text: {
    type: String,
    default: "上传",
  },
  // 背景色
  bgColor: {
    type: String,
    default: "#4EA770",
  },
  // 最大上传数
  max: {
    type: [Number, String],
    default: 1,
  },
});

const fileList = ref([]); // 文件列表
const emit = defineEmits(["update:value", "change"]);

// watch(
//   props,
//   (v) => {
//     // fileList.value = props.value;
//   },
//   { immediate: ture, deep: true }
// );

// 删除图片
const deletePic = (index) => {
  uni.showModal({
    title: "提示",
    content: "确定是否删除？",
    showCancel: true,
    success: ({ confirm, cancel }) => {
      if (confirm) {
        fileList.value.splice(index, 1);
        emit(
          "update:value",
          fileList.value.map((i) => i.url)
        );
        emit("change", fileList.value);
      }
    },
  });
};

// 预览图片
const previewImage = (item) => {
  uni.previewImage({
    urls: fileList.value.map((i) => i.fullPath),
    current: item.fullPath,
  });
};

// 新增图片
const afterRead = async (e) => {
  // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
  let list = [].concat(e.file);
  let len = fileList.value.length;
  list.map((item) => {
    fileList.value.push({
      ...item,
      status: "uploading",
      message: "上传中",
    });
  });
  for (let i = 0; i < list.length; i++) {
    const result = await uploadFilePromise(list[i].url);
    console.log(result);
    let data = fileList.value;
    fileList.value.splice(
      len,
      1,
      Object.assign(data[len], {
        status: "success",
        message: "",
        url: result.fileName,
        fullPath: result.url,
      })
    );
    len++;
  }
  emit(
    "update:value",
    fileList.value.map((i) => i.url)
  );
  emit("change", fileList.value);
};

// 上传凭证图片
const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    commonUpload(url).then((res) => {
      if (res.code == 200) {
        setTimeout(() => {
          resolve(res);
        }, 1000);
      }
    });
  });
};
</script>
<style lang="scss" scoped>
.img-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  width: 630rpx;
  margin-top: 20rpx;
  .img-item {
    position: relative;
    height: 200rpx;
    overflow: hidden;
    border-radius: 8rpx;
    background: rgba(0, 0, 0, 0.1);
    .img-del {
      position: absolute;
      top: 0;
      right: 0;
      width: 42rpx;
      height: 42rpx;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 0 8rpx 0 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }
    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
